
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
        <meta name="description" content="This post describes creating a state machine in AppRun applications to help event handling using a calculator as an example.">
      
      
      
      
        <link rel="prev" href="../rust-app/">
      
      
        <link rel="next" href="../../showcase/">
      
      
      <link rel="icon" href="../../assets/favicon.ico">
      <meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.31">
    
    
      
        <title>Use State Machine in AppRun Applications - AppRun Docs</title>
      
    
    
      <link rel="stylesheet" href="../../assets/stylesheets/main.3cba04c6.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../../assets/vendor/codemirror/codemirror.css">
    
    <script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  


  
  

<script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","UA-123786786-1"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","UA-123786786-1",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-123786786-1",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>
  
    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
  

    
    
    
  </head>
  
  
    <body dir="ltr">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#introduction" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../.." title="AppRun Docs" class="md-header__button md-logo" aria-label="AppRun Docs" data-md-component="logo">
      
  <img src="../../assets/logo.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            AppRun Docs
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Use State Machine in AppRun Applications
            
          </span>
        </div>
      </div>
    </div>
    
    
      <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/apprunjs/apprun-docs" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../.." title="AppRun Docs" class="md-nav__button md-logo" aria-label="AppRun Docs" data-md-component="logo">
      
  <img src="../../assets/logo.png" alt="logo">

    </a>
    AppRun Docs
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/apprunjs/apprun-docs" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../.." class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Home
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
    
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Concepts
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            Concepts
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    
    
    
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
        
          
          <label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Architecture
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2_1">
            <span class="md-nav__icon md-icon"></span>
            Architecture
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../architecture/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Overview
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../event-pubsub/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Event Pubsub
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../state-management/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    State Management
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../component/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Component
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../reactivity/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Reactivity
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
              
                
  
  
    
  
  
  
    
    
    
      
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" checked>
        
          
          <label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Examples
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_2_2">
            <span class="md-nav__icon md-icon"></span>
            Examples
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../dapr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Microservice wirh Dapr
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../firebase-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Serverless App Using Firebase
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../db-websocket/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Database and Websocket
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../rust-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Webassembly app with Rust
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    State Machine
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    State Machine
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#introduction" class="md-nav__link">
    <span class="md-ellipsis">
      Introduction
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#model-a-calculator" class="md-nav__link">
    <span class="md-ellipsis">
      Model a Calculator
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Model a Calculator">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#state-and-event" class="md-nav__link">
    <span class="md-ellipsis">
      State and Event
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#state-machine" class="md-nav__link">
    <span class="md-ellipsis">
      State Machine
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#add-state-machine-state" class="md-nav__link">
    <span class="md-ellipsis">
      Add State-Machine State
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#convert-ui-events" class="md-nav__link">
    <span class="md-ellipsis">
      Convert UI Events
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#use-state-machine" class="md-nav__link">
    <span class="md-ellipsis">
      Use State Machine
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#conclusion" class="md-nav__link">
    <span class="md-ellipsis">
      Conclusion
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#references" class="md-nav__link">
    <span class="md-ellipsis">
      References
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../showcase/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Showcase
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
        
          
          <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Getting started
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_3">
            <span class="md-nav__icon md-icon"></span>
            Getting started
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../installation/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Installation
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../tutorial/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Tutorial
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../create-apprun-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Create AppRun App
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../spa/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Single Page App
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
        
          
          <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Advanced
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_4">
            <span class="md-nav__icon md-icon"></span>
            Advanced
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../view-patterns/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    JSX
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../directive/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Directive
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../svg/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    SVG
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../react/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Use with React
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../3rd-party-libs/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    3rd Party Intergration
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../cli-in-console/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Dev Tools
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../strong-typing/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Strong Typing
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../unit-testing/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Unit Testing
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../notebooks/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Notebooks
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
        
          
          <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
            
  
  <span class="md-ellipsis">
    AppRun Site
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5">
            <span class="md-nav__icon md-icon"></span>
            AppRun Site
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../apprun-site/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Create
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../apprun-site-build/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Build
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../apprun-site-csr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Client-Side Rendering
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../apprun-site-ssr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Server-Side Rendering
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../apprun-site-static/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Static Web Site
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../apprun-site-cli/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    AppRun-Site CLI
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../resources/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Resources
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../about/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    About
  </span>
  

      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#introduction" class="md-nav__link">
    <span class="md-ellipsis">
      Introduction
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#model-a-calculator" class="md-nav__link">
    <span class="md-ellipsis">
      Model a Calculator
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Model a Calculator">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#state-and-event" class="md-nav__link">
    <span class="md-ellipsis">
      State and Event
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#state-machine" class="md-nav__link">
    <span class="md-ellipsis">
      State Machine
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#add-state-machine-state" class="md-nav__link">
    <span class="md-ellipsis">
      Add State-Machine State
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#convert-ui-events" class="md-nav__link">
    <span class="md-ellipsis">
      Convert UI Events
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#use-state-machine" class="md-nav__link">
    <span class="md-ellipsis">
      Use State Machine
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#conclusion" class="md-nav__link">
    <span class="md-ellipsis">
      Conclusion
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#references" class="md-nav__link">
    <span class="md-ellipsis">
      References
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  

  
  


  <h1>State Machine</h1>

<h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">&para;</a></h2>
<p>The state machine is the tool that developers must have in their toolbox.</p>
<blockquote>
<p>If you are new to the state machine, check out the reference section below.</p>
</blockquote>
<p>How can a state machine help?</p>
<p>Typically, when building applications, we follow what's known as the event-driven — where an event happens in the application, we update the application state and render the state to the screen.</p>
<p>Events can happen anytime during user interactions and system interactions, while the application can be in any state. Therefore, before we start to handle the events, we first have to determine the current state and then handle the event accordingly. Sometimes it can be challenging.</p>
<p>The state machine provides a state-event-state mapping. Thus, before we start to handle the events, we know the current state and the future state, so that we only need to focus on the limited state-event scope.</p>
<blockquote>
<p>The specific state machine we are going to use is the <a href="https://en.wikipedia.org/wiki/Mealy_machine">Mealy machine</a>. It has an initial state and then transitions to new states based on events and its current state.</p>
</blockquote>
<p>We are going to build a calculator application as an example. You will learn from this post:</p>
<ul>
<li>Model a state machine declaratively,</li>
<li>Make the state machine type-safe</li>
<li>Add the state machine to the AppRun application</li>
</ul>
<h2 id="model-a-calculator">Model a Calculator<a class="headerlink" href="#model-a-calculator" title="Permanent link">&para;</a></h2>
<h3 id="state-and-event">State and Event<a class="headerlink" href="#state-and-event" title="Permanent link">&para;</a></h3>
<p>The calculator application looks like this:</p>
<p><div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">find_transition</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state_machine</span><span class="p">,</span><span class="w"> </span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">current_state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state_machine</span><span class="p">[</span><span class="nx">state</span><span class="p">];</span>
<span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">current_state</span><span class="p">)</span><span class="w"> </span><span class="k">throw</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="ne">Error</span><span class="p">(</span><span class="sb">`No state: </span><span class="si">${</span><span class="nx">current_state</span><span class="si">}</span><span class="sb"> found in state machine`</span><span class="p">);</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">event_tuple</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">current_state</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">s</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">s</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">event</span><span class="p">);</span>
<span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">event_tuple</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">next_state</span><span class="o">:</span><span class="w"> </span><span class="nx">event_tuple</span><span class="p">[</span><span class="mf">1</span><span class="p">],</span>
<span class="w">    </span><span class="nx">transition</span><span class="o">:</span><span class="w"> </span><span class="nx">event_tuple</span><span class="p">[</span><span class="mf">2</span><span class="p">]</span>
<span class="w">  </span><span class="p">}</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="p">{}</span>
<span class="p">};</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">_state</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg1</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg2</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">op</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">stack</span><span class="o">:</span><span class="w"> </span><span class="p">[]</span>
<span class="p">};</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">stack</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">style</span><span class="o">&gt;</span><span class="w"> </span><span class="p">{</span><span class="sb">`</span>
<span class="sb">    .calculator { width: 200px; }</span>
<span class="sb">    .buttons {</span>
<span class="sb">      display: grid;</span>
<span class="sb">      grid-template-columns: repeat(4, 1fr);</span>
<span class="sb">      grid-gap: 2px;</span>
<span class="sb">    }</span>
<span class="sb">    button { padding: 10px; width:100%; }</span>
<span class="sb">    button:nth-of-type(1) {</span>
<span class="sb">      grid-column: span 2;</span>
<span class="sb">    }</span>
<span class="sb">    button:nth-of-type(16) {</span>
<span class="sb">      grid-column: span 2;</span>
<span class="sb">    }</span>
<span class="sb">  `</span><span class="p">}</span>
<span class="w">  </span><span class="o">&lt;</span><span class="err">/style&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="kd">class</span><span class="o">=</span><span class="s2">&quot;calculator&quot;</span><span class="o">&gt;</span>
<span class="w">    </span><span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">display</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
<span class="w">    </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="kd">class</span><span class="o">=</span><span class="s2">&quot;buttons&quot;</span><span class="w"> </span><span class="nx">$onclick</span><span class="o">=</span><span class="p">{</span><span class="nx">button_click</span><span class="p">}</span><span class="o">&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="nx">CE</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;+</span><span class="err">/-&lt;/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="err">/&lt;/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">7</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">8</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">9</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;*&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">4</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">5</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">6</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;-&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">1</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">2</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">3</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;+&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">0</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="p">.</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;=&lt;</span><span class="err">/button&gt;</span>
<span class="w">    </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="w">    </span><span class="o">&lt;</span><span class="nx">small</span><span class="o">&gt;</span>
<span class="w">      </span><span class="p">{</span><span class="nx">stack</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">stack</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="mf">0</span><span class="p">]</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">stack</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="mf">1</span><span class="p">]</span><span class="si">}</span><span class="sb"> `</span><span class="p">}</span>
<span class="w">      </span><span class="p">{</span><span class="nx">_state</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">&quot;FIRST_&quot;</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span>
<span class="w">      </span><span class="p">{</span><span class="nx">_state</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s2">&quot;OP&quot;</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">arg1</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">op</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span>
<span class="w">      </span><span class="p">{</span><span class="nx">_state</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">&quot;SECOND_&quot;</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">arg1</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">op</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span>
<span class="w">      </span><span class="p">{</span><span class="nx">_state</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s2">&quot;EQ&quot;</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">arg1</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">op</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">arg2</span><span class="si">}</span><span class="sb"> = </span><span class="si">${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span>
<span class="w">    </span><span class="o">&lt;</span><span class="err">/small&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="o">&lt;</span><span class="err">/&gt;;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">button_click</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">priority</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="s1">&#39;*&#39;</span><span class="o">:</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span>
<span class="w">    </span><span class="s1">&#39;/&#39;</span><span class="o">:</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span>
<span class="w">    </span><span class="s1">&#39;+&#39;</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">    </span><span class="s1">&#39;-&#39;</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">getEvent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">c</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;+/-&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;+/-&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;CE&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;CE&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;.&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;DOT&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;=&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">default</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="sr">/\d/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">&#39;NUM&#39;</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">;</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">?</span><span class="p">.</span><span class="nx">textContent</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">e</span><span class="p">;</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">event</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getEvent</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>

<span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">stack</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state</span><span class="p">;</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">clear</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">;</span>
<span class="w">    </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<span class="w">    </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="w">    </span><span class="nx">stack</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">negative</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">display</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s1">&#39;-&#39;</span><span class="p">)</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">display</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;-&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">display</span><span class="p">;</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">calc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">eval</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">arg1</span><span class="si">}${</span><span class="nx">op</span><span class="si">}${</span><span class="nx">arg2</span><span class="si">}</span><span class="sb">`</span><span class="p">).</span><span class="nx">toString</span><span class="p">();</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">op1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">;</span>
<span class="w">    </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">op2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">priority</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">priority</span><span class="p">[</span><span class="nx">op</span><span class="p">])</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="nx">calc</span><span class="p">();</span>
<span class="w">      </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">;</span>
<span class="w">      </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">priority</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">priority</span><span class="p">[</span><span class="nx">op</span><span class="p">])</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="nx">calc</span><span class="p">();</span>
<span class="w">      </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">;</span>
<span class="w">      </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">stack</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">        </span><span class="kd">const</span><span class="w"> </span><span class="nx">f</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">stack</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
<span class="w">        </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">eval</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">f</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span><span class="si">}${</span><span class="nx">f</span><span class="p">[</span><span class="mf">1</span><span class="p">]</span><span class="si">}${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
<span class="w">        </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">arg1</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span>
<span class="w">      </span><span class="p">}</span>
<span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">stack</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">]);</span>
<span class="w">      </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">;</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">eq0</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">    </span><span class="nx">calc</span><span class="p">();</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">eq2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">    </span><span class="nx">calc</span><span class="p">();</span>
<span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">stack</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="kd">const</span><span class="w"> </span><span class="nx">f</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">stack</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
<span class="w">      </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">eval</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">f</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span><span class="si">}${</span><span class="nx">f</span><span class="p">[</span><span class="mf">1</span><span class="p">]</span><span class="si">}${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">).</span><span class="nx">toString</span><span class="p">();</span>
<span class="w">      </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">f</span><span class="p">[</span><span class="mf">0</span><span class="p">];</span>
<span class="w">      </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">f</span><span class="p">[</span><span class="mf">1</span><span class="p">];</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">state_machine</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">START</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0.&#39;</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">FIRST_ARG</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op1</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">FIRST_ARG_FLOAT</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op1</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">OP</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0.&#39;</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">SECOND_ARG</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">eq2</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op2</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">SECOND_ARG_FLOAT</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">eq2</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op2</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">EQ</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0.&#39;</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">eq0</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op1</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">    </span><span class="p">]</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">next_state</span><span class="p">,</span><span class="w"> </span><span class="nx">transition</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">find_transition</span><span class="p">(</span><span class="nx">state_machine</span><span class="p">,</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">event</span><span class="p">);</span>
<span class="w">  </span><span class="nx">_state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">next_state</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">_state</span><span class="p">;</span>
<span class="w">  </span><span class="nx">transition</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">transition</span><span class="p">();</span>

<span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">stack</span><span class="w"> </span><span class="p">};</span>
<span class="p">}</span>
<span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span><span class="w"> </span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">);</span>
</code></pre></div>
<apprun-play style="height:350px" hide_src="true"></apprun-play></p>
<p>Click the 'Try the Code' button; you will see the source code.</p>
<p>The calculator has a grid of buttons that users can click at any time. It also displays:</p>
<ul>
<li>The numbers that the user typed and the calculation result on top of the grid.</li>
<li>The calculation formula includes the first argument, the operator, and the second argument, and the calculation result below the gird.</li>
</ul>
<p>Let's model the initial state of the calculator.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg1</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg2</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">op</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<span class="p">};</span>
</code></pre></div>
<p>We handle the buttons' click events in the event handler, <em>button___click</em>. Because of the HTML event bubbling, we only need one event handler for all the buttons.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="kd">class</span><span class="o">=</span><span class="s2">&quot;buttons&quot;</span><span class="w"> </span><span class="nx">$onclick</span><span class="o">=</span><span class="p">{</span><span class="nx">button_click</span><span class="p">}</span><span class="o">&gt;</span>
<span class="w">  </span><span class="p">......</span>
<span class="w">  </span><span class="o">&lt;</span><span class="err">/div&gt;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">button_click</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="p">}</span>

<span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span><span class="w"> </span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">);</span>
</code></pre></div>
<p>That's all we need to do to create an AppRun application, an <em>initial state</em>, a <em>view</em>, and <em>event handlers</em>.</p>
<p>Next, we will add the state machine implementation.</p>
<h3 id="state-machine">State Machine<a class="headerlink" href="#state-machine" title="Permanent link">&para;</a></h3>
<blockquote>
<p>We follow and extend the calculator state machine from <a href="https://www.codinglawyer.io/posts/build-javascript-calculator">David's post</a>. The post also provides a <a href="https://www.codinglawyer.io/static/c24440761863d1b3b8bf38e336056726/fa498/sketch-fsm.png">diagram</a> helpful to understand the state machine.</p>
</blockquote>
<p>We first define the <em>states</em> and <em>events</em> of the state machine using TypeScript <a href="https://www.typescriptlang.org/docs/handbook/advanced-types.html#discriminated-unions">Discriminated Unions</a>.</p>
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">Events</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;NUM&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;DOT&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;CE&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;+/-&#39;</span><span class="p">;</span>

<span class="kr">type</span><span class="w"> </span><span class="nx">States</span><span class="w"> </span><span class="o">=</span>
<span class="w">  </span><span class="s1">&#39;START&#39;</span><span class="w"> </span><span class="o">|</span>
<span class="w">  </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="w"> </span><span class="o">|</span>
<span class="w">  </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="w"> </span><span class="o">|</span>
<span class="w">  </span><span class="s1">&#39;OP&#39;</span><span class="w"> </span><span class="o">|</span>
<span class="w">  </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="w"> </span><span class="o">|</span>
<span class="w">  </span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="w"> </span><span class="o">|</span>
<span class="w">  </span><span class="s1">&#39;EQ&#39;</span><span class="p">;</span>
</code></pre></div>
<p>We then define the state machine. It is a collection of all the <em>states</em>. Each <em>state</em> has a list of available <em>events</em> and <em>transitions</em> in an array. The <em>transition</em> is the function to update the <em>state</em>.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">state_machine</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">START</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0.&#39;</span><span class="p">]</span>
<span class="w">  </span><span class="p">],</span>
<span class="w">  </span><span class="nx">FIRST_ARG</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op1</span><span class="p">],</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">  </span><span class="p">],</span>
<span class="w">   </span><span class="p">...</span>
<span class="p">}</span>
</code></pre></div>
<p>For example, when the <em>current state</em> is START, and the NUM event comes, the <em>new state</em> should be 'FIRST_ARG (waiting for 1st argument)'. The <em>display</em> property of the <em>state</em> should be the user's input.</p>
<p>Another example, when the <em>current state</em> is FIRST_ARG, and the <em>+/- event</em> comes, the <em>display</em> property should toggle between positive and negative.</p>
<p>So on and so forth. It is straightforward to create the state machine object according to the diagram.</p>
<p>Next, we make the state machine type-safe by adding more types.</p>
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">Transition</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="ow">void</span><span class="p">;</span>
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">EventStateTransition</span><span class="o">&lt;</span><span class="nx">E</span><span class="p">,</span><span class="w"> </span><span class="nx">S</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="nx">E</span><span class="p">,</span><span class="w"> </span><span class="nx">S</span><span class="p">,</span><span class="w"> </span><span class="nx">Transition</span><span class="p">];</span>
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">StateMachine</span><span class="o">&lt;</span><span class="nx">S</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="p">[</span><span class="nx">key</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">S</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="nx">EventStateTransition</span><span class="o">&lt;</span><span class="nx">E</span><span class="p">,</span><span class="w"> </span><span class="nx">S</span><span class="o">&gt;</span><span class="p">[];</span>
<span class="p">};</span>
</code></pre></div>
<ul>
<li>The <em>Tansition</em> is a function to update the application state.</li>
<li>The <em>EventStateTransition</em> is a TypeScript <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html#tuple">Tuple</a>. It describes which <em>event</em> leads to which new state.</li>
<li>The <em>StateMachine is an object that uses the _States</em> as the index key.</li>
</ul>
<p>Now, the state machine is type-safe. The TypeScript compiler only allows you to use the states and events defined in <em>States</em> and <em>Events</em>.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">state_machine</span><span class="o">:</span><span class="w"> </span><span class="kt">StateMachine</span><span class="o">&lt;</span><span class="nx">States</span><span class="p">,</span><span class="w"> </span><span class="nx">Events</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">START0</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="c1">// Error on START0</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;NUM0&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{}],</span><span class="w"> </span><span class="c1">// Error on NUM0</span>
<span class="w">    </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT0&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{}]</span><span class="w"> </span><span class="c1">// Error on FIRST_ARG_FLOAT0</span>
<span class="w">  </span><span class="p">],</span>
<span class="p">}</span>
</code></pre></div>
<p>Also, the compiler makes sure all <em>States</em> have their relevant entries in the state machine.</p>
<p><div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">state_machine</span><span class="o">:</span><span class="w"> </span><span class="kt">StateMachine</span><span class="o">&lt;</span><span class="nx">States</span><span class="p">,</span><span class="w"> </span><span class="nx">Events</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">START</span><span class="o">:</span><span class="w"> </span><span class="p">[],</span>
<span class="w">  </span><span class="nx">FIRST_ARG</span><span class="o">:</span><span class="w"> </span><span class="p">[],</span>
<span class="w">  </span><span class="nx">FIRST_ARG_FLOAT</span><span class="o">:</span><span class="w"> </span><span class="p">[],</span>
<span class="w">  </span><span class="nx">OP</span><span class="o">:</span><span class="p">[],</span><span class="w"> </span><span class="nx">SECOND_ARG</span><span class="o">:</span><span class="p">[],</span>
<span class="w">  </span><span class="nx">SECOND_ARG_FLOAT</span><span class="o">:</span><span class="p">[],</span>
<span class="w">  </span><span class="c1">//EQ:[] // Error on missing EQ state, if we commented it out</span>
<span class="p">}</span>
</code></pre></div>
You can see the state machine is just a simple data structure.</p>
<h3 id="add-state-machine-state">Add State-Machine State<a class="headerlink" href="#add-state-machine-state" title="Permanent link">&para;</a></h3>
<p>We add a new property for tracking the state-machine state, called <em><em>_state</em></em>, into the initial state.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">_state</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">States</span><span class="p">,</span>
<span class="w">  </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg1</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg2</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">op</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<span class="p">};</span>
<span class="k">export</span><span class="w"> </span><span class="nx">type</span><span class="w"> </span><span class="nx">State</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">typeof</span><span class="w"> </span><span class="nx">state</span><span class="p">;</span>
</code></pre></div>
<h3 id="convert-ui-events">Convert UI Events<a class="headerlink" href="#convert-ui-events" title="Permanent link">&para;</a></h3>
<p>All button clicks use the <em>button___click</em> event handler. We convert UI events into different state-machine events.</p>
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">button_click</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="o">:</span><span class="w"> </span><span class="kt">State</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="o">:</span><span class="w"> </span><span class="kt">any</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">getEvent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">c</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="nx">Events</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;+/-&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;+/-&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;CE&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;CE&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;.&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;DOT&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;=&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="nx">default</span><span class="o">:</span>
<span class="w">        </span><span class="kt">return</span><span class="w"> </span><span class="o">/</span><span class="err">\</span><span class="nx">d</span><span class="o">/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">&#39;NUM&#39;</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">;</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">?</span><span class="p">.</span><span class="nx">textContent</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">e</span><span class="p">;</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">event</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getEvent</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>


<span class="p">}</span>
</code></pre></div>
<h3 id="use-state-machine">Use State Machine<a class="headerlink" href="#use-state-machine" title="Permanent link">&para;</a></h3>
<p>Now that we know the current state-machine state from the <em><em>_state</em></em> property of the application state. We also know which state-machine event we are in. We now can use the <em>state___machine</em> to find the matching <em>transition</em>.</p>
<p>Finding <em>transitions</em> from the <em>state___machine</em> is straightforward.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">find_transition</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">S</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="o">&gt;</span><span class="p">(</span>
<span class="w">  </span><span class="nx">state_machine</span><span class="o">:</span><span class="w"> </span><span class="kt">StateMachine</span><span class="o">&lt;</span><span class="nx">S</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="o">&gt;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">state</span><span class="o">:</span><span class="w"> </span><span class="kt">S</span><span class="p">,</span>
<span class="w">  </span><span class="nx">event</span><span class="o">:</span><span class="w"> </span><span class="kt">E</span>
<span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">next_state?</span><span class="o">:</span><span class="w"> </span><span class="kt">S</span><span class="p">,</span><span class="w"> </span><span class="nx">transition?</span><span class="o">:</span><span class="w"> </span><span class="kt">Transition</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">current_state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state_machine</span><span class="p">[</span><span class="nx">state</span><span class="p">];</span>
<span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">current_state</span><span class="p">)</span><span class="w"> </span><span class="k">throw</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="ne">Error</span><span class="p">(</span><span class="sb">`No state: </span><span class="si">${</span><span class="nx">current_state</span><span class="si">}</span><span class="sb"> found in state machine`</span><span class="p">);</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">event_tuple</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">current_state</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">s</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">s</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">event</span><span class="p">);</span>
<span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">event_tuple</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">next_state</span><span class="o">:</span><span class="w"> </span><span class="kt">event_tuple</span><span class="p">[</span><span class="mf">1</span><span class="p">],</span>
<span class="w">    </span><span class="nx">transition</span><span class="o">:</span><span class="w"> </span><span class="kt">event_tuple</span><span class="p">[</span><span class="mf">2</span><span class="p">]</span>
<span class="w">  </span><span class="p">}</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="p">{}</span>
<span class="p">};</span>
</code></pre></div>
<p>If we found the <em>transition</em>, we run the <em>transition</em> function. It updates the destructed application state properties, such as <em>op</em>, <em>arg1</em>, <em>arg2</em>, and <em>display</em> accordingly. We then update the application state to be the <em>next state</em>.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">button_click</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state</span><span class="p">;</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">event</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getEvent</span><span class="p">(</span><span class="nx">s</span><span class="p">);</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">state_machine</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">next_state</span><span class="p">,</span><span class="w"> </span><span class="nx">transition</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">find_transition</span><span class="p">(</span><span class="nx">state_machine</span><span class="p">,</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">event</span><span class="p">);</span>
<span class="w">  </span><span class="nx">transition</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">transition</span><span class="p">();</span>
<span class="w">  </span><span class="nx">_state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">next_state</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">_state</span><span class="p">;</span>

<span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">};</span>
<span class="p">}</span>
</code></pre></div>
<p>If no <em>transition</em> found, nothing will happen.</p>
<p>Finally, we return a new state from the event handler; AppRun will render the screen accordingly.</p>
<p>Now, we have successfully created the calculator application. You can see the calculator in TypeScript below.</p>
<div class="admonition source code">
<p class="admonition-title">Source</p>
<div class="tabbed-set" data-tabs="1:3"><input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" /><label for="__tabbed_1_1">state machine</label><div class="tabbed-content">
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">Transition</span><span class="o">&lt;</span><span class="nx">T</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">any</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state?</span><span class="o">:</span><span class="w"> </span><span class="kt">T</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="ow">void</span><span class="p">;</span>
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">EventStateTransition</span><span class="o">&lt;</span><span class="nx">E</span><span class="p">,</span><span class="w"> </span><span class="nx">S</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="nx">E</span><span class="p">,</span><span class="w"> </span><span class="nx">S</span><span class="p">,</span><span class="w"> </span><span class="nx">Transition</span><span class="p">];</span>
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">StateMachine</span><span class="o">&lt;</span><span class="nx">S</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="p">[</span><span class="nx">key</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">S</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="nx">EventStateTransition</span><span class="o">&lt;</span><span class="nx">E</span><span class="p">,</span><span class="w"> </span><span class="nx">S</span><span class="o">&gt;</span><span class="p">[];</span>
<span class="p">};</span>

<span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">find_transition</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">S</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="o">&gt;</span><span class="p">(</span>
<span class="w">  </span><span class="nx">state_machine</span><span class="o">:</span><span class="w"> </span><span class="kt">StateMachine</span><span class="o">&lt;</span><span class="nx">S</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="o">&gt;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">state</span><span class="o">:</span><span class="w"> </span><span class="kt">S</span><span class="p">,</span>
<span class="w">  </span><span class="nx">event</span><span class="o">:</span><span class="w"> </span><span class="kt">E</span>
<span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">next_state?</span><span class="o">:</span><span class="w"> </span><span class="kt">S</span><span class="p">,</span><span class="w"> </span><span class="nx">transition?</span><span class="o">:</span><span class="w"> </span><span class="kt">Transition</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">current_state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state_machine</span><span class="p">[</span><span class="nx">state</span><span class="p">];</span>
<span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">current_state</span><span class="p">)</span><span class="w"> </span><span class="k">throw</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="ne">Error</span><span class="p">(</span><span class="sb">`No state: </span><span class="si">${</span><span class="nx">current_state</span><span class="si">}</span><span class="sb"> found in state machine`</span><span class="p">);</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">event_tuple</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">current_state</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">s</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">s</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">event</span><span class="p">);</span>
<span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">event_tuple</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">next_state</span><span class="o">:</span><span class="w"> </span><span class="kt">event_tuple</span><span class="p">[</span><span class="mf">1</span><span class="p">],</span>
<span class="w">    </span><span class="nx">transition</span><span class="o">:</span><span class="w"> </span><span class="kt">event_tuple</span><span class="p">[</span><span class="mf">2</span><span class="p">]</span>
<span class="w">  </span><span class="p">}</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="p">{}</span>
<span class="p">};</span>
</code></pre></div>
</div>
<input id="__tabbed_1_2" name="__tabbed_1" type="radio" /><label for="__tabbed_1_2">calculator app</label><div class="tabbed-content">
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="nx">app</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Component</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;../../src/apprun&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">StateMachine</span><span class="p">,</span><span class="w"> </span><span class="nx">find_transition</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;./state-machine&#39;</span><span class="p">;</span>

<span class="kr">type</span><span class="w"> </span><span class="nx">Events</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;NUM&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;DOT&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;CE&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;+/-&#39;</span><span class="p">;</span>

<span class="kr">type</span><span class="w"> </span><span class="nx">States</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">_state</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">States</span><span class="p">,</span>
<span class="w">  </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg1</span><span class="o">:</span><span class="w"> </span><span class="kt">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg2</span><span class="o">:</span><span class="w"> </span><span class="kt">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">op</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">stack</span><span class="o">:</span><span class="w"> </span><span class="p">[]</span>
<span class="p">};</span>
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">State</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">typeof</span><span class="w"> </span><span class="nx">state</span><span class="p">;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">stack</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">State</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">style</span><span class="o">&gt;</span><span class="w"> </span><span class="p">{</span><span class="sb">`</span>
<span class="sb">    .calculator { width: 200px; }</span>
<span class="sb">    .buttons {</span>
<span class="sb">      display: grid;</span>
<span class="sb">      grid-template-columns: repeat(4, 1fr);</span>
<span class="sb">      grid-gap: 2px;</span>
<span class="sb">    }</span>
<span class="sb">    button { padding: 10px; width:100%; }</span>
<span class="sb">    button:nth-of-type(1) {</span>
<span class="sb">      grid-column: span 2;</span>
<span class="sb">    }</span>
<span class="sb">    button:nth-of-type(16) {</span>
<span class="sb">      grid-column: span 2;</span>
<span class="sb">    }</span>
<span class="sb">  `</span><span class="p">}</span>
<span class="w">  </span><span class="o">&lt;</span><span class="err">/style&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="kd">class</span><span class="o">=</span><span class="s2">&quot;calculator&quot;</span><span class="o">&gt;</span>
<span class="w">    </span><span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">display</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
<span class="w">    </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="kd">class</span><span class="o">=</span><span class="s2">&quot;buttons&quot;</span><span class="w"> </span><span class="nx">$onclick</span><span class="o">=</span><span class="p">{</span><span class="nx">button_click</span><span class="p">}</span><span class="o">&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="nx">CE</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;+</span><span class="err">/-&lt;/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="err">/&lt;/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">7</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">8</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">9</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;*&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">4</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">5</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">6</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;-&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">1</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">2</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">3</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;+&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="mf">0</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="p">.</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">      </span><span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;=&lt;</span><span class="err">/button&gt;</span>
<span class="w">    </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="w">    </span><span class="o">&lt;</span><span class="nx">small</span><span class="o">&gt;</span>
<span class="w">      </span><span class="p">{</span><span class="nx">stack</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">stack</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="mf">0</span><span class="p">]</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">stack</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="mf">1</span><span class="p">]</span><span class="si">}</span><span class="sb"> `</span><span class="p">}</span>
<span class="w">      </span><span class="p">{</span><span class="nx">_state</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">&quot;FIRST_&quot;</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span>
<span class="w">      </span><span class="p">{</span><span class="nx">_state</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s2">&quot;OP&quot;</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">arg1</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">op</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span>
<span class="w">      </span><span class="p">{</span><span class="nx">_state</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">&quot;SECOND_&quot;</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">arg1</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">op</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span>
<span class="w">      </span><span class="p">{</span><span class="nx">_state</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s2">&quot;EQ&quot;</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">arg1</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">op</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">arg2</span><span class="si">}</span><span class="sb"> = </span><span class="si">${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span>
<span class="w">    </span><span class="o">&lt;</span><span class="err">/small&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="o">&lt;</span><span class="err">/&gt;;</span>

<span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">button_click</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="o">:</span><span class="w"> </span><span class="kt">State</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="o">:</span><span class="w"> </span><span class="kt">any</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">priority</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="s1">&#39;*&#39;</span><span class="o">:</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span>
<span class="w">    </span><span class="s1">&#39;/&#39;</span><span class="o">:</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span>
<span class="w">    </span><span class="s1">&#39;+&#39;</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">    </span><span class="s1">&#39;-&#39;</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">getEvent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">c</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="nx">Events</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;+/-&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;+/-&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;CE&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;CE&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;.&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;DOT&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;=&#39;</span><span class="o">:</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">;</span>
<span class="w">      </span><span class="nx">default</span><span class="o">:</span>
<span class="w">        </span><span class="kt">return</span><span class="w"> </span><span class="o">/</span><span class="err">\</span><span class="nx">d</span><span class="o">/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">&#39;NUM&#39;</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">;</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">?</span><span class="p">.</span><span class="nx">textContent</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">e</span><span class="p">;</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">event</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getEvent</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>

<span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">stack</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state</span><span class="p">;</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">clear</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">;</span>
<span class="w">    </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<span class="w">    </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="w">    </span><span class="nx">stack</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">negative</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">display</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s1">&#39;-&#39;</span><span class="p">)</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">display</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;-&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">display</span><span class="p">;</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">calc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">eval</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">arg1</span><span class="si">}${</span><span class="nx">op</span><span class="si">}${</span><span class="nx">arg2</span><span class="si">}</span><span class="sb">`</span><span class="p">).</span><span class="nx">toString</span><span class="p">();</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">op1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">;</span>
<span class="w">    </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">op2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">priority</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">priority</span><span class="p">[</span><span class="nx">op</span><span class="p">])</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="nx">calc</span><span class="p">();</span>
<span class="w">      </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">;</span>
<span class="w">      </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">priority</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">priority</span><span class="p">[</span><span class="nx">op</span><span class="p">])</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="nx">calc</span><span class="p">();</span>
<span class="w">      </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">;</span>
<span class="w">      </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">stack</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">        </span><span class="kd">const</span><span class="w"> </span><span class="nx">f</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">stack</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
<span class="w">        </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">eval</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">f</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span><span class="si">}${</span><span class="nx">f</span><span class="p">[</span><span class="mf">1</span><span class="p">]</span><span class="si">}${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
<span class="w">        </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">arg1</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span>
<span class="w">      </span><span class="p">}</span>
<span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">stack</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">]);</span>
<span class="w">      </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">;</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">eq0</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">    </span><span class="nx">calc</span><span class="p">();</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">eq2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">    </span><span class="nx">calc</span><span class="p">();</span>
<span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">stack</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">display</span><span class="p">);</span>
<span class="w">      </span><span class="kd">const</span><span class="w"> </span><span class="nx">f</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">stack</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
<span class="w">      </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">eval</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">f</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span><span class="si">}${</span><span class="nx">f</span><span class="p">[</span><span class="mf">1</span><span class="p">]</span><span class="si">}${</span><span class="nx">display</span><span class="si">}</span><span class="sb">`</span><span class="p">).</span><span class="nx">toString</span><span class="p">();</span>
<span class="w">      </span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">f</span><span class="p">[</span><span class="mf">0</span><span class="p">];</span>
<span class="w">      </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">f</span><span class="p">[</span><span class="mf">1</span><span class="p">];</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">state_machine</span><span class="o">:</span><span class="w"> </span><span class="kt">StateMachine</span><span class="o">&lt;</span><span class="nx">States</span><span class="p">,</span><span class="w"> </span><span class="nx">Events</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">START</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0.&#39;</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">FIRST_ARG</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op1</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">FIRST_ARG_FLOAT</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op1</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">OP</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0.&#39;</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">op</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">SECOND_ARG</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">eq2</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op2</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">SECOND_ARG_FLOAT</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">eq2</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op2</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">]</span>
<span class="w">    </span><span class="p">],</span>

<span class="w">    </span><span class="nx">EQ</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;+/-&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">negative</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;NUM&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">key</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;DOT&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;0.&#39;</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;EQ&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">eq0</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;OP&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">op1</span><span class="p">],</span>
<span class="w">      </span><span class="p">[</span><span class="s1">&#39;CE&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">clear</span><span class="p">]</span>
<span class="w">    </span><span class="p">]</span>
<span class="w">  </span><span class="p">};</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">next_state</span><span class="p">,</span><span class="w"> </span><span class="nx">transition</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">find_transition</span><span class="p">(</span><span class="nx">state_machine</span><span class="p">,</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">event</span><span class="p">);</span>
<span class="w">  </span><span class="nx">_state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">next_state</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">_state</span><span class="p">;</span>
<span class="w">  </span><span class="nx">transition</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">transition</span><span class="p">();</span>

<span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">stack</span><span class="w"> </span><span class="p">};</span>
<span class="p">};</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">update</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="s1">&#39;#calculator&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">state</span>
<span class="p">};</span>

<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="nx">element</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Component</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">,</span><span class="w"> </span><span class="nx">update</span><span class="p">).</span><span class="nx">mount</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
</code></pre></div>
</div>
<input id="__tabbed_1_3" name="__tabbed_1" type="radio" /><label for="__tabbed_1_3">calculator specs</label><div class="tabbed-content">
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">button_click</span><span class="p">,</span><span class="w"> </span><span class="nx">State</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;./calculator&#39;</span><span class="p">;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="o">:</span><span class="w"> </span><span class="kt">State</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">_state</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;START&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;0&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg1</span><span class="o">:</span><span class="w"> </span><span class="kt">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">arg2</span><span class="o">:</span><span class="w"> </span><span class="kt">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">op</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">stack</span><span class="o">:</span><span class="w"> </span><span class="p">[]</span>
<span class="p">};</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">click</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">input</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">keys</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[...</span><span class="nx">input</span><span class="p">];</span>
<span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="nx">s</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state</span><span class="p">;</span>
<span class="w">  </span><span class="nx">keys</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">key</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">new_state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">button_click</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span><span class="w"> </span><span class="nx">key</span><span class="p">);</span>
<span class="w">    </span><span class="nx">s</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">new_state</span>
<span class="w">  </span><span class="p">})</span>
<span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">s</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;calculator&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 1&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 2&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;12&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;12&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 3&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1+2=&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;3&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">arg1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">arg2</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mf">2</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;EQ&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 4&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1/&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;OP&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 5&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1/2&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;2&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 6&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1//&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">op</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;OP&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 7&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1/=&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">op</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;OP&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 8&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">op</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1/+&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">op</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;+&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;OP&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 9&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1/10&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;10&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;SECOND_ARG&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 10&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1+1.&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1.&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;SECOND_ARG_FLOAT&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 11&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;0.&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;0.&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;FIRST_ARG_FLOAT&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 12&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;=&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;0&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;START&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 13&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;0&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;START&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 14&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1+2=5&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;5&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;FIRST_ARG&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 15&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1+2=/&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;3&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;OP&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 16&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1/+=&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;OP&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 17&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1+2=*3=&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;9&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;EQ&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 18&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1+2*3=&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;7&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">arg1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">arg2</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mf">6</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;EQ&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 19&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="p">,</span><span class="w"> </span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1*2+3=&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;5&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">arg1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mf">2</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">arg2</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mf">3</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;EQ&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="w">  </span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;case 20&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">_state</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;1+2*3*&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">display</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;6&#39;</span><span class="p">);</span>
<span class="w">    </span><span class="nx">expect</span><span class="p">(</span><span class="nx">_state</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;OP&#39;</span><span class="p">);</span>
<span class="w">  </span><span class="p">})</span>

<span class="p">});</span>
</code></pre></div>
</div>
</div>
</div>
<h2 id="conclusion">Conclusion<a class="headerlink" href="#conclusion" title="Permanent link">&para;</a></h2>
<p>We have created a declarative and type-safe state machine. The state machine data structure is technology agnostic. You can try to use it in React or other frameworks you like. It can naturally fit into AppRun applications.</p>
<p>AppRun is event-driven. Often I feel it is challenging to make events right. Sometimes we define too many events. Sometimes the events come out of order. By using the state machine, I can handle the events within limited state scopes. I have started to think of using more state machines to control the events.</p>
<h2 id="references">References<a class="headerlink" href="#references" title="Permanent link">&para;</a></h2>
<p>There are many references online about the state machine. I got most of my inspiration from the following posts. I recommend you read the concept explanation of the posts and pay less attention to the implementations because using AppRun; you can do better.</p>
<ul>
<li>
<p>[1] Krasimir Tsonev explains <a href="https://en.wikipedia.org/wiki/Mealy_machine">Mealy</a> and <a href="https://en.wikipedia.org/wiki/Moore_machine">Moore</a> in the post: <a href="https://www.smashingmagazine.com/2018/01/rise-state-machines/">The Rise Of The State Machines</a></p>
</li>
<li>
<p>[2] Jon Bellah describes the paradigm shift from event-driven to the state machine in this post: <a href="https://jonbellah.com/articles/intro-state-machines">A Complete Introduction to State Machines in JavaScript</a></p>
</li>
<li>
<p>[3] Erik Mogensen explains state machine and introduced the statechart in this post: <a href="https://statecharts.github.io/what-is-a-state-machine.html">What is a state machine?</a></p>
</li>
</ul>
<p>Have fun coding!</p>







  
  



  




                
              </article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2015 - 2025 Yiyi Sun
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "../..", "features": ["navigation.sections"], "search": "../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../../assets/javascripts/bundle.fe8b6f2b.min.js"></script>
      
        <script src="../../assets/vendor/codemirror/codemirror.js"></script>
      
        <script src="../../assets/vendor/codemirror/mode/javascript/javascript.js"></script>
      
        <script src="../../assets/vendor/codemirror/mode/xml/xml.js"></script>
      
        <script src="../../assets/vendor/codemirror/mode/jsx/jsx.js"></script>
      
        <script src="../../assets/apprun-play.js"></script>
      
        <script src="../../assets/apprun-code.js"></script>
      
    
  </body>
</html>